<template>
  <div class="member-list">
    <!--    生产管理-订单蓝纸-->
    <BasicTable @register="registerTable">
      <template #toolbar>
        <div class="flex-row-center-start" style="width: 100%; margin: 10px">
          <RadioGroup button-style="solid" v-model:value="radioVal" @change="reload()">
            <RadioButton v-for="item in statusList" :key="item.value" :value="item.value">
              {{ item.label }}
            </RadioButton>
          </RadioGroup>
        </div>
      </template>
      <template #attachment="{ record }">
        <div class="flex-col">
          <a v-if="ifHasAttachment(record)" @click="handlePreview(record, '1')">原文件</a>
          <a
            style="margin-top: 5px"
            v-if="record.bluePrintImgUrl"
            @click="handlePreview(record, '2')"
            >蓝纸</a
          >
        </div>
      </template>
      <template #spec="{ record }">
        <div v-for="item in specList(record)" :key="item.bizMetaAttrId">
          {{ item.spuSpecName }}：{{ item.spuSpecValueName }}
        </div>
      </template>
      <template #action="{ record }">
        <div class="flex-col-center-center">
          <template v-if="!record['isAbnormal']">
            <a-button
              size="small"
              type="primary"
              v-if="[PENDING_UPLOAD].includes(record['status'])"
              @click="handleUploadFile(record['id'])"
              >上传原文件</a-button
            >
            <a-button
              size="small"
              type="primary"
              v-if="[PENDING_PROCESS].includes(record['status'])"
              @click="handleUploadBluePrint(record['id'])"
              >上传蓝纸</a-button
            >
            <a-button
              size="small"
              v-show="false"
              color="warning"
              v-if="[PENDING_PROCESS].includes(record['status'])"
              @click="handleResetFile"
              >重传原文件</a-button
            >
            <a-button
              size="small"
              type="primary"
              v-if="[PENDING_CONFIRM].includes(record['status'])"
              @click="handleResetBluePrint(record['id'])"
              >重传蓝纸</a-button
            >
          </template>
          <a-button
            size="small"
            color="error"
            v-if="
              [PENDING_UPLOAD, PENDING_PROCESS].includes(record['status']) && !record['isAbnormal']
            "
            @click="handleMark(record.id, true)"
            >标记异常</a-button
          >
          <a-button
            size="small"
            color="success"
            v-if="record['isAbnormal']"
            @click="handleMark(record.id, false)"
            >恢复正常</a-button
          >
          <a-button
            size="small"
            v-show="false"
            style="color: white; background: #0084f4"
            @click="handleShowDetail"
            >详情</a-button
          >
        </div>
      </template>
      <template #isAbnormal="{ text }">
        <Tag :color="text ? 'red' : 'green'">{{ text ? '是' : '否' }}</Tag>
      </template>
      <template #status="{ text }">
        <Tag :color="targetStatus(text, statusList).color">
          {{ targetStatus(text, statusList).label }}
        </Tag>
      </template>
    </BasicTable>

    <!--    文件上传-->
    <UploadModal @register="registerModal" @success="handleUploadSuccess" />
    <!--    文件预览-->
    <PreviewModal @register="registerPreviewModal" @success="closePreviewModal()" />
  </div>
</template>

<script setup lang="ts">
  import UploadModal from './modal.vue';
  import { targetStatus } from '@/utils';
  import mcApi from 'mc-c2b2m-operator-api';
  import { useModal } from '@/components/Modal';
  import PreviewModal from './previewModal.vue';
  import { computed, onActivated, ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { tableColumns, tableFormSchema } from './data';
  import { BasicTable, useTable } from '@/components/Table';
  import { RadioButton, RadioGroup, Tag } from 'ant-design-vue';
  import { SalesProductBatchModel } from 'mc-c2b2m-operator-api/types/production';
  import {
    SalesProductBatchStatusEnum,
    salesProductBatchStatusList as statusList,
  } from '@/enums/productionEnum';

  const { ProductionModule } = mcApi;
  const { BluePaperApi } = ProductionModule;

  const { ALL, PENDING_UPLOAD, PENDING_CONFIRM, PENDING_PROCESS } = SalesProductBatchStatusEnum;

  const [registerModal, { openModal, closeModal }] = useModal();
  const [registerPreviewModal, { openModal: openPreviewModal, closeModal: closePreviewModal }] =
    useModal();

  const radioVal = ref<SalesProductBatchStatusEnum>(ALL);
  const [registerTable, { reload }] = useTable({
    striped: false,
    bordered: false,
    canResize: false,
    immediate: false,
    useSearchForm: true,
    columns: tableColumns,
    showIndexColumn: false,
    showTableSetting: false,
    api: BluePaperApi.getSalesProductBatchPage,
    scroll: { x: 1600 },
    beforeFetch: (arg) => {
      Object.keys(arg).forEach((key) => {
        const data = arg[key];
        const value = data?.value;
        value && (arg[key] = value);
      });
      arg.status = radioVal.value;
      arg.desc = 'capb.created_time';
      if (radioVal.value === -1) {
        delete arg.status;
        arg.isAbnormal = true;
      }
    },
    formConfig: {
      labelWidth: 120,
      schemas: tableFormSchema,
    },
    actionColumn: {
      width: 200,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  onActivated(() => reload());

  const specList = computed(() => {
    return (record: SalesProductBatchModel) => {
      const {
        materialSpecValueList: mList,
        printingSpecValueList: pList,
        processSpecValueList: prList,
      } = record;
      return (mList || []).concat(pList || []).concat(prList || []);
    };
  });

  const { createMessage, createConfirm } = useMessage();

  // 是否存在文件信息
  const ifHasAttachment = computed(() => (record: any) => {
    const { attachmentList } = record || {};
    return !!(attachmentList || []).find((find: any) => find.url);
  });
  // 上传原文件
  function handleUploadFile(id: string) {
    openModal(true, { id, type: 'attachment' });
  }
  // 上传蓝纸
  function handleUploadBluePrint(id: string) {
    openModal(true, { id, type: 'bluePrint' });
  }
  // 重传蓝纸
  function handleResetBluePrint(id: string) {
    openModal(true, { id, type: 'bluePrint' });
  }
  // 上传蓝纸/原文件成功
  function handleUploadSuccess() {
    reload();
    closeModal();
  }
  // 重传原文件
  function handleResetFile() {
    createMessage.warning('敬请期待！');
  }
  // 标记异常/恢复正常
  function handleMark(id: string, ifError = true) {
    const text = ifError ? '标记异常' : '恢复正常';
    createConfirm({
      title: '提示',
      iconType: 'warning',
      content: `是否确认${text}？`,
      onOk: async () => {
        await BluePaperApi.markSalesProductBatch(id);
        await reload();
        createMessage.success(`${text}成功！`);
      },
    });
  }
  // 查看详情
  function handleShowDetail() {
    createMessage.warning('敬请期待！');
  }
  // 预览文件
  function handlePreview(record: SalesProductBatchModel, type: string) {
    openPreviewModal(true, {
      type,
      record,
    });
  }
</script>
<script lang="ts">
  export default {
    name: 'BluePaper',
  };
</script>

<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }
  :deep(.ant-btn) {
    min-width: 90px;
    margin-bottom: 6px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
